<template>
  <d2-container class="page">
    <div class="page-table">
      <el-button type="primary" @click="onAdd">新增</el-button>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="title" label="标题"></el-table-column>
        <el-table-column prop="locationType" label="显示位置">
          <template slot-scope="scope">
            <span v-if="scope.row.locationType === 0">首页</span>
            <span v-else-if="scope.row.locationType === 1">我的</span>
          </template>
        </el-table-column>
        <el-table-column label="发布" width="100">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       v-if="scope.row.status === 0"
                       @click="onReport({index: scope.$index, row: scope.row})"
            >发布</el-button>
            <el-button type="success" size="small"
                       v-if="scope.row.status === 1"
                       @click="onReport({index: scope.$index, row: scope.row})"
            >已发布</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="260">
          <template slot-scope="scope">
            <el-button type="primary" size="small"
                       @click="onUpdate({index: scope.$index, row: scope.row})"
            >修改</el-button>
            <el-button type="primary" size="small"
                       @click="onInfo({index: scope.$index, row: scope.row})"
            >详情</el-button>
            <el-button type="danger" size="small"
                       @click="onDelete({index: scope.$index, row: scope.row})"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        layout="prev, pager, next, jumper, total"
        :page-size="queryForm.limit"
        :current-page="queryForm.page"
        :total="pagination.total"
        @current-change="pageChange">
      </el-pagination>
    </div>
    <!--  新增  -->
    <ann-add
      v-if="visibleAdd"
      :visible="visibleAdd"
      @cancel="cancelAdd"
      @submit="submitAdd"
    />
    <!--  修改  -->
    <ann-update
      v-if="visibleUpdate"
      :visible="visibleUpdate"
      :info="currRow"
      @cancel="cancelUpdate"
      @submit="submitUpdate"
    />
    <!--  详情  -->
    <ann-info
      v-if="visibleInfo"
      :visible="visibleInfo"
      :info="currRow"
      @submit="submitInfo"
    />
  </d2-container>
</template>

<script>
import AnnAdd from './ann-add'
import AnnUpdate from './ann-update'
import AnnInfo from './ann-info'
import { mapActions } from 'vuex'

export default {
  name: 'page',
  data () {
    return {
      visibleAdd: false,
      visibleUpdate: false,
      visibleInfo: false,
      loading: false,
      currRow: null,
      queryForm: {
        moduleType: '0',
        page: 1,
        limit: 10
      },
      pagination: {
        total: 0
      },
      tableData: []
    }
  },
  components: {
    AnnAdd,
    AnnUpdate,
    AnnInfo
  },
  mounted () {
    this.queryList()
  },
  methods: {
    ...mapActions('d2admin/pm.ad', [
      'adList',
      'adDelete',
      'adReport'
    ]),
    // 查询列表
    queryList () {
      this.loading = true
      this.adList(this.queryForm).then(
        res => {
          this.loading = false
          this.tableData = res.list
          this.pagination.total = res.totalCount
        }
      ).catch(() => {
        this.loading = false
      })
    },
    // 切换发布状态
    onReport ({ index, row }) {
      let content = ''
      if (row.status === 0) {
        content = '您确定发布吗？'
      } else {
        content = '您确定取消发布吗？'
      }
      this.$confirm(content, '提示').then(res => {
        this.adReport({
          id: row.id
        }).then(res => {
          this.queryList()
        })
      }).catch(err => {})
    },
    // 其他用途调用
    queryHandle (page) {
      this.queryForm.page = page
      this.queryList()
    },
    // 切换分页
    pageChange (curr) {
      this.queryHandle(curr)
    },
    // 查询按钮
    onSubmit () {
      this.queryHandle(1)
    },
    // 新增
    onAdd () {
      this.visibleAdd = true
    },
    // 修改
    onUpdate ({ index, row }) {
      this.currRow = row
      this.visibleUpdate = true
    },
    // 详情
    onInfo ({ index, row }) {
      this.currRow = row
      this.visibleInfo = true
    },
    // 删除
    onDelete ({ index, row }) {
      this.$confirm('您确定删除吗？', '提示').then(res => {
        this.adDelete({
          id: row.id
        }).then(res => {
          this.queryHandle(1)
        })
      }).catch(err => {})
    },
    // 取消新增操作
    cancelAdd (visible) {
      this.visibleAdd = visible
    },
    // 提交新增操作
    submitAdd (visible) {
      this.visibleAdd = visible
      this.queryHandle(1)
    },
    // 取消修改操作
    cancelUpdate (visible) {
      this.visibleUpdate = visible
    },
    // 提交修改操作
    submitUpdate (visible) {
      this.visibleUpdate = visible
      this.queryHandle(1)
    },
    // 提交详情操作
    submitInfo (visible) {
      this.visibleInfo = visible
    }
  }
}
</script>

<style lang="scss" scoped>
  .page {
    .page-form {
      border: 1px solid #eee;
      padding: 20px 20px 0;
    }
    .page-table {
      border: 1px solid #eee;
      padding: 20px;
      margin-top: 20px;
      .el-image {
        width: 60px;
        height: 60px;
      }
    }
  }
</style>
